<template>
  <div class="com-container">
    <div ref="com-chart" class="com-chart" />
  </div>
</template>

<script>
import '../../../public/static/theme/chalk.js'
import '../../../public/static/theme/macarons.js'

export default {
  name: 'Seller',
  data() {
    return {
      chartInstance: null,
      data: null, // 服务器返回的数据
      currentPage: 1, // 当前显示的页数
      totalPage: 0, // 一共有多少页
      timerId: null // 定时器标识
    }
  },
  mounted() {
    this.initChart()
    this.getData()
    window.addEventListener('resize', this.screenAdapter)
    // 在页面加载完成的时候，主动进行屏幕的适配
    this.screenAdapter()
  },
  destroyed() {
    clearInterval(this.timerId)
    // 在组件销毁的时候，将监听器取消掉
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    // 初始化echartInstance对象
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs['com-chart'], 'chalk')

      // 对图表初始化配置的控制
      const initOption = {
        title: {
          text: '🌲 商家销售统计',
          textStyle: {
            fontSize: 50
          },
          left: 75,
          top: 80
        },
        grid: {
          top: '20%',
          left: '3%',
          right: '6%',
          bottom: '3%',
          containLabel: true // 距离是包含坐标轴上的文字
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            z: 0,
            lineStyle: {
              width: 66,
              color: '#2D3443',
              type: 'solid'
            }
          }
        },
        series: [{
          type: 'bar',
          barWidth: 66,
          label: {
            show: true,
            position: 'right',
            color: 'black'
            // textStyle: {
            //   color: 'black'
            // }
          },
          itemStyle: {
            // 每个柱子的圆角
            borderRadius: [0, 33, 33, 0],
            // 指明颜色渐变的方向
            // 指明不同百分比之下的颜色的值
            color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
              // 百分之0下的颜色值
              {
                offset: 0,
                color: '#5052EE'
              },
              // 百分之百下的颜色值
              {
                offset: 1,
                color: '#AB6EE5'
              }
            ])

          }
        }]
      }

      this.chartInstance.setOption(initOption)

      // 对图表对象进行鼠标事件监听
      this.chartInstance.on('mouseover', () => {
        clearInterval(this.timerId)
      })
      this.chartInstance.on('mouseout', () => {
        this.startInterval()
      })
    },
    // 获取服务器数据
    async getData() {
      await this.$http.get('seller').then(response => {
        // console.log(response.data)
        this.data = response.data
        this.data.sort((a, b) => {
          return a.value - b.value // 从小到大的排序
        })
      }).catch(error => {
        console.log(error)
      })
      // 每5个元素显示一页
      this.totalPage = this.data.length % 5 === 0 ? this.data.length / 5 : this.data.length / 5 + 1

      this.updateChart()
      this.startInterval()
    },
    // 更新图表
    updateChart() {
      const start = (this.currentPage - 1) * 5
      const end = this.currentPage * 5
      const showData = this.data.slice(start, end)
      const sellerName = showData.map((item) => {
        return item.name
      })
      const sellerValue = showData.map((item) => {
        return item.value
      })
      const dataOption = {
        yAxis: {
          data: sellerName
        },

        series: [{
          data: sellerValue
        }]
      }
      this.chartInstance.setOption(dataOption)
    },
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(() => {
        this.currentPage++
        if (this.currentPage > this.totalPage) {
          this.currentPage = 1
        }
        this.updateChart()
      }, 3000)
    },
    // 但浏览器的大小发生变化的时候，会调用的方法，来完成屏幕的适配
    screenAdapter() {
      const titleFontSize = this.$refs['com-chart'].offsetWidth / 100 * 3.6
      // 和分辨率配置相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize
          }
        },
        tooltip: {
          lineStyle: {
            width: titleFontSize
          }
        },
        series: [{
          barWidth: titleFontSize,
          itemStyle: {
            // 每个柱子的圆角
            borderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
          }
        }]
      }
      this.chartInstance.setOption(adapterOption)
      // 手动调用图表对象的resize方法 才能产生效果
      this.chartInstance.resize()
    }
  }

}
</script>

<style lang="less">
.com-chart {
  height: 800px;
  width: 100%;
}

canvas {
  border-radius: 20px;
}
</style>
